<!DOCTYPE html>
<html lang="cn">
<head>
<title>云南省公安厅专网综合运维平台</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/style.css" />
<script type="text/javascript" src="../scripts/lib/jquery-1.11.3/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../scripts/lib/base.js"></script>
<script type="text/javascript" src="../scripts/app/appApi.js"></script>
<script type="text/javascript" src="../scripts/app/appController.js"></script>
<script type="text/javascript" src="../scripts/app/appData.js"></script>
<script type="text/javascript" src="../scripts/app/frame.js"></script>
<script type="text/javascript" src="../scripts/app/libs.js"></script>
<script type="text/javascript" src="../scripts/app/jquery.com.toolkit.js"></script>
</head>

<body>

    <!-- 顶部 -->
    <div class="header">
        <h1><img src="../assets/imgs/logo.png" alt="" /></h1>
        <div class="toptime">2015-11-23 15:20</div>
    </div>
    
    <!-- 左侧 -->
    <div class="wrap-left">
    	<div class="wrap-base">
        	<h2>安全监管信息</h2>
            <div class="wrap-base-bd">
            	<div class="safety-supervision">
                	<dl id="safeInfo">
                    	<dd><h5>网络设备</h5><b>26</b>台</dd>
                        <dd><b>500</b>台<h5>服务器</h5></dd>
                        <dd><b>612</b>台<h5>存储设备</h5></dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="wrap-base">
        	<h2>运行状态</h2>
            <div class="wrap-base-bd">
            	<span class="clockcircle"><img src="../assets/imgs/icon_taishi.png" alt="" /><b>98</b></span>
            	<p class="blocktit">运行状态气象图</p>
                <div class="blocklist">
                	<ul>
                    	<li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li class="bg-yellow"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="bg-red"></li>
                        <li></li>
                        <li></li>
						<li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="block-cate">
                	<ul>
                    	<li><em class="bg-green"></em>正常 86%</li>
                        <li><em class="bg-yellow"></em>告警 6%</li>
                        <li><em class="bg-red"></em>故障 8%</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="wrap-base">
        	<h2>资源状态</h2>
            <div class="wrap-base-bd">
            	<!-- 资源状态 说明：echatrs的 属性  width:17rem; height:12rem -->
                <img src="../assets/imgs/test01.png" alt="" />
            </div>
        </div>
    </div>
    
    <!-- 右侧 -->
    <div class="wrap-right">
        <div class="wrap-base">
        	<h2>安全态势</h2>
            <div class="wrap-base-bd">
            	<div class="situation">
                	<dl>
                    	<dd>
                        	<span><img src="../assets/imgs/icon_taishi.png" alt="" /></span>
                        	<h3>98</h3>
                        	<p><img src="../assets/imgs/icon_1.png" alt="" /></p>
                            <p>综合指数</p>
                        </dd>
                        <dd>
                        	<span><img src="../assets/imgs/icon_taishi.png" alt="" /></span>
                        	<h3>87</h3>
                        	<p><img src="../assets/imgs/icon_2.png" alt="" /></p>
                            <p>脆弱性指数</p>
                        </dd>
                        <dd>
                        	<span><img src="../assets/imgs/icon_taishi.png" alt="" /></span>
                        	<h3>76</h3>
                        	<p><img src="../assets/imgs/icon_3.png" alt="" /></p>
                            <p>威胁指数</p>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="wrap-base">
        	<h2>工作负载</h2>
            <div class="wrap-base-bd">
            	<!-- 工作负载 说明：echatrs的 属性  width:17rem; height:12rem -->
                <img src="../assets/imgs/test03.png" alt="" />
            </div>
        </div>
        <div class="wrap-base">
        	<h2>风险级别</h2>
            <div class="wrap-base-bd">
            	<!-- 风险级别 说明：echatrs的 属性  width:17rem; height:12rem -->
                <img src="../assets/imgs/test02.png" alt="" />
            </div>
        </div>
    </div>
    
    <!-- 中间 -->
	<div class="wrap-main">
    	
        <div class="circlebg"></div>
        <div class="circlelogo"><img src="../assets/imgs/circlelogo.png" alt="" /></div>
        <div class="circle"></div>
    	
        <div id="test-element"></div>

		<link href='../styles/feature.presenter.1.5.css' rel='stylesheet' type='text/css'>
		<script src="../scripts/lib/feature.presenter.1.5.min.js"></script>
        
        <script>
        
        /* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
        var settings = [ {image: '../assets/imgs/zzsc1.png', heading: '<ul class="list01"><li><h3>网博WIFI</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>123123123</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''}, 
                        {image: '../assets/imgs/zzsc2.png', heading: '<ul class="list01"><li><h3>瑞安网络</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>321</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''}, 
                        {image: '../assets/imgs/zzsc3.png', heading: '<ul class="list01"><li><h3>美亚舆情</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>321</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''}, 
                        {image: '../assets/imgs/zzsc4.png', heading: '<ul class="list01"><li><h3>美亚网综</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>321</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''}, 
                        {image: '../assets/imgs/zzsc5.png', heading: '<ul class="list01"><li><h3>烽火网综</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>321</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''},
                        {image: '../assets/imgs/zzsc6.png', heading: '<ul class="list01"><li><h3>邦富舆情</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>321</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''},
                        {image: '../assets/imgs/zzsc7.png', heading: '<ul class="list01"><li><h3>网博网吧</h3></li><li><em>台</em><b>54</b>服务器</li><li><em>kb/s</em><b>124</b>网络</li><li><em>mb</em><b>54</b>存储</li><li><b>正常</b>实时可用性</li><li><em>ms</em><b>54</b>实时响应时间</li><li><b>--</b>实时繁忙度</li><li>写入量<div><i>321</i><span style="width:80%; background:#21d5d7;"></span></div></li><li>输出量<div><i>1987</i><span style="width:56%; background:#f77880;"></span></div></li></ul>', description: ''}, 
                        ];
        
        var options = {
            circle_radius: 220,
            normal_feature_size: 100,
            highlighted_feature_size: 100,
            top_margin: 60,
            bottom_margin: 50,
            spacing: 40,
            min_padding: 50,
            heading_font_size: 30,
            description_font_size: 20,
            type: 'image'
        };
        
        var fp = new FeaturePresenter($("#test-element"), settings, options);
        fp.createPresenter();
        
        </script>
    	
    </div>


	<!-- 底部 -->
    <div class="wrap-foot">
        <div class="wrap-base wrap-base-big">
        	<h2>资源访问量排名</h2>
            <div class="wrap-base-bd">
            	<div class="runk">
                	<dl>
                    	<dd>
                        	<h5>mysql121</h5>
                        	<div class="persent"><span style=" width:90%">96.32%</span></div>
                            <b>62447</b>
                        </dd>
                        <dd>
                        	<h5>mysql121</h5>
                        	<div class="persent"><span style=" width:80%">80%</span></div>
                            <b>62447</b>
                        </dd>

                    </dl>
                </div>
            </div>
        </div>
        <div class="wrap-base wrap-base-big">
        	<h2>审计告警</h2>
            <div class="wrap-base-bd">
            	<div class="tips">
                	<dl>
                    	<dd>财政局开始向中心传输隐私数据。</dd>
                        <dd>5号前端探测系统完成财政局敏感数据脱密，开始向中心传输数据。</dd>
                        <dd>公安局开始向人社局传输敏感数据。</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    
<script src="../scripts/app/index/index.js"></script>
    
</body>
</html>